import React, {Component} from 'react';
import {Anchor} from 'antd';
import css from './Home.less';
import reactLogo from '../../assets/react.svg';
import antdLogo from '../../assets/antd.svg';

const { Link } = Anchor;

export default class HomeContainer extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
        <div>
          <article className={css.markdown}>
            <h1>Demo of React and Ant Design</h1>
            <article className={css.markdown}>
              <p>这里是React实现的demo，用了ant design的ui框架，用来帮助熟悉react开发模式</p>
            </article>
            <div className={css['pic-plus']}>
              <img width="150" src={antdLogo}/>
              <span>+</span>
              <img width="150" src={reactLogo}/>
            </div>
          </article>
          <section className={css.markdown}>
            <h2 id="版本">
              <span>版本</span>
              <a href="#版本" className={css.anchor}>#</a>
            </h2>
            <ul>
              <li>
                <p>开发版：0.0.1</p>
              </li>
            </ul>
          </section>
          <section className={css.markdown}>
            <h2 id="安装运行">
              <span>安装</span>
              <a href="#安装" className={css.anchor}>#</a>
            </h2>
            <h3>
              <span>使用 npm 安装</span>
              <a href="#使用-npm-安装" className={css.anchor}>#</a>
            </h3>
            <pre className="language-bash">
              <code>$ npm install</code>
            </pre>
            <h3>
              <span>使用 npm 运行</span>
              <a href="#使用-npm-运行" className={css.anchor}>#</a>
            </h3>
            <pre className="language-bash">
              <code>$ npm run dev</code>
            </pre>
          </section>
          <Anchor className={css['toc-affix']}>
            <Link href="#版本" title="版本"/>
            <Link href="#安装运行" title="安装运行"/>
          </Anchor>
        </div>
    )
  }
}